<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.id ? '修改' : '发布' }}文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-form ref="form" :model="articleParams" :rules="rules" label-width="40px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="articleParams.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- <el-input type="textarea" v-model="articleParams.content"></el-input> -->
           <el-tiptap v-model="articleParams.content"
           :extensions="extensions"
           placeholder="请输入文章内容"
           :height="350"
           />
        </el-form-item>
        <el-form-item label="封面">
          <!--
              我们需要把选择的封面图片的地址放到 article.cover.images 数组中
              当你给事件处理函数传递了自定义参数以后,就无法得到原本的那个数据参数了
              如果想要在事件处理函数自定义传参以后还想得到原来的那个事件本身的参数,则手动指定
              $event 他就代表那个事件本身的参数 例子: @uploadsuccess
           -->
          <el-radio-group v-model="articleParams.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
          <!-- 选择封面图片组件 -->
          <template v-if="articleParams.cover.type > 0">
          <!--
             在组件上使用 v-model
            当你给子组件提供的数据既要使用还要修改，这个时候我们可以使用 v-model 简化数据绑定。
            v-model="article.cover.images[index]"
              给子组件传递了一个名字叫 value 的数据
              :value="article.cover.images[index]"
              默认监听 input 事件，当事件发生，它会让绑定数据 = 事件参数
              @input="article.cover.images[index] = 事件参数"
           -->
          <uploadCover :i="index" v-model="articleParams.cover.images[index]" v-for="(cover,index) in articleParams.cover.type" :key="cover"></uploadCover>
            <!-- 自定义事件接收修改参数可能会有点小问题,所以使用 v-model -->
            <!-- <uploadCover @uploadsuccess="uploadsuccess(index,$event)" v-for="(cover,index) in articleParams.cover.type" :key="cover"></uploadCover> -->
          </template>
        </el-form-item>
        <el-form-item label="频道" prop="channel_id">
          <el-select v-model="articleParams.channel_id" placeholder="请选择频道">
            <el-option v-for="channel in channelList" :key="channel.id" :label="channel.name" :value="channel.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onAddArticleFn">{{$route.query.id ? '修改' : '发表'}}</el-button>
          <el-button  @click="onDraftArticleFn">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
  import uploadCover from './components/'
  import {
  reqArticleChanle,
  reqAddArticle,
  reqDetailArticle,
  reqUpdateArticle,
  reqUpload,
  } from '@/api'
  import {
    // 需要的 extensions
    Doc,
    Text,
    Paragraph,
    Heading,
    Bold,
    Underline,
    Italic,
    Strike,
    ListItem,
    BulletList,
    OrderedList,
    TodoList,
    TodoItem,
    TextColor,
    Image
  } from 'element-tiptap';
  export default {
    name: 'PublishIndex',
    data() {
      return {
         extensions: [
            new Doc(),
            new Text(),
            new Paragraph(),
            new Heading({ level: 5 }),
            new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
            new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
            new Italic(),
            new Strike(),
            new ListItem(),
            new BulletList(),
            new OrderedList(),
            new Image({
              // 默认会把图片生成base64格式的图片,字符串和内容存储在一起,以下方法为自定义图片上传
              // 最后需要返回 return 一个图片url
              // 自定义图像上传方法，该方法应返回Promise＜url＞
              uploadRequest(file){
                // file 等同于 事件对象file[0]
                // FormData 对象默认就是存储为 multipart/form-data 格式的数据
                const fd = new FormData()
                // image字段为后端所需要的数据字段名一致
                fd.append('image',file)
                // 图片上传接口
                return reqUpload(fd).then(res => {
                  return res.data.url
                })
              }
            }),
            new TextColor(),
            new TodoItem(),
            new TodoList(),
        ],
        // 验证规则
        rules: {
          title: [
            { required: true,  message: '请输入文章标题', trigger: 'blur'},
            { min: 5, message: '标题内容不应小于5位', trigger: 'blur'}
          ],
          channel_id: [
            { required: true,  message: '请选择文章频道', trigger: 'blur'},
          ],
          content: [
            { required: true,  message: '文章内容不能为空', trigger: 'blur'},
            { validator(rule, value, callback){
              if(value === '<p></p>'){
                callback(new Error('文章内容不能为空'))
              }else{
                callback()
              }
            }
            }
          ],
        },
        // 发布文章表单
        articleParams:{
          title: '', // 文章标题
          content: '' ,// 文章内容
          cover: { // 图片封面收集
            type: 0, // 封面类型 -1:自动，0-无图，1-1张，3-3张
            images: []
          },
          channel_id: null // 发布的频道id
        },
        channelList: [] // 存储文章频道数组
      }
    },
    created(){
      if(this.$route.query.id){ // 通过判断有无文章id来判断是修改还是新增文章
        this.getDetailArticle() // 查询具体某一篇文章详情
      }
      this.getArticleChanle() // 请求所有频道列表
    },
    methods: {
      // 请求所有频道列表
      async getArticleChanle(){
        const res = await reqArticleChanle()
        this.channelList = res.data.channels
      },
      // 增加新文章
       onAddArticleFn() {
        this.$refs.form.validate(valid => {
          if(valid) { // 校验通过
            if(this.$route.query.id){
              this.ReqPublicArticle(this.$route.query.id,this.articleParams,false)// 修改
            }else{
              this.ReqPublicArticle(null,this.articleParams,false) // 新增
            }
          }
        })
      },
      // 增加文章为草稿状态
       onDraftArticleFn(){
        this.$refs.form.validate(valid => {
          if(valid) { // 校验通过
            if(this.$route.query.id){
              this.ReqPublicArticle(this.$route.query.id,this.articleParams,true)// 修改/草稿
            }else{
              this.ReqPublicArticle(null,this.articleParams,true) // 草稿
            }
          }
        })
      },
      // 查询具体某一篇文章详情
      async getDetailArticle(){
        const res = await reqDetailArticle(this.$route.query.id)
        if(res.data){
          this.articleParams = res.data
        }
        console.log(res,'查询具体文章')
      },
      // 封装发布文章 / 存为草稿的方法
      async ReqPublicArticle(articleId,data,draft){
        console.log(articleId,data,draft)
        if(this.$route.query.id){
          const res = await reqUpdateArticle(articleId,data,draft)
          if(res.data.id){
            this.$message({
              type: 'info',
              message: !draft ? '修改文章成功' : '修改存为草稿成功'
            })
            this.$router.push('/article')
          }
          console.log(res,(!draft ? '修改文章成功' : '修改存为草稿成功'))
        }else{
          const res = await reqAddArticle(data,draft)
          if(res.data.id){
            this.$message({
              type: 'success',
              message: !draft ? '新增文章成功' : '存为草稿成功'
            })
            this.$router.push('/article')
          }
          console.log(res,(!draft ? '新增文章成功' : '存为草稿成功'))
        }
      },
      // 接收子组件自定义事件(接收需要上传的url,合并进上传参数数组里面)
      uploadsuccess(index,url){
        // 使用了 v-model 双向数据绑定简化操作
        // console.log(index,url)
        // this.articleParams.cover.images[index] = url
      }
    },
    computed: {},
    components: {
      uploadCover
    }
  }
</script>
<style lang="less" scope>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
